<template>
    <div class="page">
        <SubHeader title="修改收货地址"></SubHeader>
        <div class='main'>
            <ul>
                <li>收货人</li>
                <li><input type="text" placeholder="收货人姓名" v-model="name"/></li>
            </ul>
            <ul>
                <li>联系方式</li>
                <li><input type="text" placeholder="联系人手机号" v-model="cellphone"/></li>
            </ul>
            <ul>
                <li>所在地区</li>
                <li>
                    <input type="text" placeholder="请选择所在地区" class='area' readonly :value="showArea" @click="isArea=true"/>
                </li>
            </ul>
            <ul>
                <li>详细地址</li>
                <li><input type="text" placeholder="街道详细地址" v-model="address"/></li>
            </ul>
            <ul>
                <li>设置为默认地址</li>
                <li><input type="checkbox" v-model="isDefault"/></li>
            </ul>
            <button type="button" class='submit-save' @click="submit()">修改</button>
        </div>
        <van-popup v-model="isArea">
            <van-area :area-list="areaList" @cancel="isArea=false" @confirm="selectArea" />
        </van-popup>
    </div>
</template>

<script>
    import Vue from "vue";
    import {mapActions} from "vuex";
    import {Toast,Area,Popup} from "vant";
    import SubHeader from "../../../components/sub_header";
    import areaData from '../../../assets/data/area';
    Vue.use(Area);
    Vue.use(Popup);
    export default {
        name: "address-mod",
        data(){
            return {
                name:"",
                cellphone:"",
                showArea:"",    //所在地区
                address:"",     //详细地址
                isDefault:false,    //默认地址
                areaList:areaData,  //城市数据源
                isArea:false,
                province:"",    //省
                city:"",        //市
                area:""         //区
            }
        },
        created(){
            /*
            设置一个开关，用来判断，也就是说如果遇到网速不好或者页面卡顿的情况下，如果用户一直点击提交，那么后台就会一直接收，就会严重影响性能，而避免这种情况
            就需要进行设置判断，当用户点击一次的时候正常提交，如果用户点击第二次以及很多次的话，那么不进行发送
            */
            this.isSubmit = true;
            this.aid = this.$route.query.aid ? this.$route.query.aid : "";  //获取到了aid进行判断一下，如果有值的话那么就走值，如果没有的话就为空
            this.getAddressInfo({aid:this.aid,success:(res)=>{  //此处的aid是需要在address中在跳转的时候进行获取
                this.name = res.data.name;
                 this.cellphone=res.data.cellphone;
                this.showArea = res.data.province+" "+res.data.city+" "+res.data.area;
                this.address = res.data.address;
                this.province = res.data.province;
                this.city = res.data.city;
                this.area = res.data.area;
                this.isDefault = res.data.isdefault === '1'?true : false;
            }});
        },
        mounted(){
            document.title=this.$route.meta.title;
        },
        components:{
            SubHeader
        },
        methods:{
            ...mapActions({
                modAddress:"address/modAddress",
                getAddressInfo:"address/getAddressInfo",
            }),
            submit(){
                if (this.name.match(/^\s*$/)) {
                    Toast("请输入收货人姓名");
                    return;
                }
                if (this.cellphone.match(/^\s*$/)) {
                    Toast("请输入手机号");
                    return;
                }
                if (!this.cellphone.match(/^1[3456789]\d{9}$/)) {
                    Toast("您输入的手机号格式不正确");
                    return;
                }
                if (this.showArea.match(/^\s*$/)) {
                    Toast("请选择所在地区");
                    return;
                }
                if (this.address.match(/^\s*$/)) {
                    Toast("请输入详细地址");
                    return;
                }
                //如果等于true的话，正常进行提交
                if(this.isSubmit){
                    //进来之后直接改为false，这样的话，第二次就无法进来了，只能进来第一次
                    this.isSubmit = false;
                    this.modAddress({aid:this.aid,name:this.name,cellphone:this.cellphone,province:this.province,area:this.area,city:this.city,
                    address:this.address,isdefault:this.isDefault ? "1":"0",success:(res)=>{
                        if (res.code === 200) {
                            Toast({
                                duration:2000,
                                message:"修改成功",
                                onClose:()=>{   //执行回调函数
                                    this.$router.go(-1);
                                }
                            })
                        }
                    }})
                }
            },
            selectArea(val) {
                //这个val能获取到所有的城市数据，当点击确定的时候变为false让其消失，之后创建一个空数组，把值都放在数组中
                this.isArea = false;
                let tmpVal=[];
                if (val.length>0) {
                    for (let i = 0; i < val.length; i++) {
                        tmpVal.push(val[i].name);
                    }
                    this.province=tmpVal[0];
                    this.city=tmpVal[1];
                    this.area=tmpVal[2];
                }
                //中间使用空格进行分隔
                this.showArea = tmpVal.join(" ")
            }
        }
    }
</script>

<style scoped>
    .page {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-color: #FFFFFF;
    }

    .sub-header {
        width: 100%;
        height: 1rem;
        background-color: #FFFFFF;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        border-bottom: 1px solid #EFEFEF;
        position: fixed;
        z-index: 10;
        left: 0;
        top: 0;
    }

    .sub-header .back {
        width: 0.8rem;
        height: 0.8rem;
        background-image: url("../../../assets/images/home/goods/back.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .sub-header .title {
        width: 79%;
        height: auto;
        font-size: 0.32rem;
        text-align: center;
    }

    .sub-header .right-btn {
        width: auto;
        height: auto;
        font-size: 0.32rem;
    }

    .main {
        width: 100%;
        margin-top: 1rem;
    }

    .main ul {
        width: 100%;
        height: 1.02rem;
        border-bottom: #EFEFEF 1px solid;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
    }

    .main ul li {
        font-size: 0.32rem;
        margin-left: 0.3rem;
    }

    .main ul li:nth-child(2) {
        width: 62%;
        height: 100%;
    }

    .main ul li input[type='text'] {
        width: 100%;
        height: 95%;
        font-size: 0.32rem;
    }

    .main ul li .area {
        font-size: 0.28rem !important;
    }

    .main ul li input[type='checkbox'] {
        width: 0.4rem;
        height: 0.4rem;
        margin-top: 0.3rem;
    }

    .main .submit-save {
        width: 85%;
        height: 0.8rem;
        background-color: #FCB40A;
        border-radius: 4px;
        margin: 0 auto;
        display: block;
        border: 0 none;
        outline: none;
        font-size: 0.32rem;
        color: #FFFFFF;
        margin-top: 0.4rem;
    }
</style>